<template>
  <div class="dp-wrapper">
    <input type="text" v-model="inputValue" />
    <button @click="btnClick">提交</button>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
const emit = defineEmits(["transferInputValue"]);
const state = reactive({
  inputValue: "",
});
const { inputValue } = toRefs(state);

function btnClick() {
  emit("transferInputValue", inputValue.value);
  inputValue.value = "";
}
</script>

<style lang='scss'>
.dp-wrapper {
  width: 100%;
  height: 30px;
  display: flex;

  input {
    flex: 1;
  }
  button {
    width: 100px;
    margin-left: 5px;
  }
}
</style>